<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据的双向绑定</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<!--插值表达式{{变量}}-->

<div id="app">
    <input type="text" v-model:value="name">{{name}}, {{age}}, {{flag}}
    <hr/>
    <p>定义方法里面一定要加括号</p>
    {{sayHi()}}
    <hr/>
    {{ [1,2,3,4,5][2] }}
    <hr/>
    <p>大括号中间一定要留空格</p>
    {{ {name:"孟云鹏",age:"24"} }}
    <hr/>
    {{ {name:"孟云鹏",age:"24"}.name }}
</div>

<script>
    new Vue({
        el: "#app",//el:当前的vue对象要绑定到页面上的哪个元素
        data: {    //声明的数据，json对象
            name: "加贝",
            age: 24,
            flag: true
        },
        methods: {
            sayHi: function () {
                return "Hello Vue!";
            }
        }
    });
</script>
</body>
</html>